<template>
	<div>
		<mt-header fixed title="介绍">
		  <router-link to="/" slot="left">
		    <mt-button icon="back">返回</mt-button>
		  </router-link>
		</mt-header>
		<div class="container">
			<div id="myChartone" :style="{width: '350px', height: '300px'}"></div>
			<div id="myChart" :style="{width: '350px', height: '300px'}"></div><br/>
			<div id="myChartThree" :style="{width: '350px', height: '300px'}"></div>
		</div>
	</div>
</template>
<script type="text/javascript">
// // 引入基本模板
// let echarts = require('echarts/lib/echarts')
// // 引入柱状图组件
// require('echarts/lib/chart/bar')
// // 引入提示框和title组件
// require('echarts/lib/component/tooltip')
// require('echarts/lib/component/title')
	export default{
		data(){
			return{

			}
		},
	mounted() {
			this.drawLineOne();
			this.drawLine();
			this.myChartThree();

		},
		methods: {
			drawLineOne() {
				// 基于准备好的dom，初始化echarts实例
				let myChartone = this.$echarts.init(document.getElementById('myChartone'))
					// 绘制图表
				myChartone.setOption({
					title: {
						text: '本周',
						x: 'right'
					},

					// title: {
					// 	text: '某站点用户访问来源',
					// 	subtext: '纯属虚构',
					// 	x: 'center'
					// },
					// tooltip: {
					// 	trigger: 'item',
					// 	formatter: "{a} <br/>{b} : {c} ({d}%)"
					// },
					legend: {
						orient: 'vertical',
						x: 'left',
						data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
					},
					toolbox: {
						show: true,
					},
					calculable: true,
					series: [{
						name: '访问来源',
						type: 'pie',
						radius: '55%',
						center: ['50%', '60%'],
						data: [{
							value: 335,
							name: '直接访问'
						}, {
							value: 310,
							name: '邮件营销'
						}, {
							value: 234,
							name: '联盟广告'
						}, {
							value: 135,
							name: '视频广告'
						}, {
							value: 1548,
							name: '搜索引擎'
						}]
					}]
				});
			},
			drawLine() {
				// 基于准备好的dom，初始化echarts实例
				let myChart = this.$echarts.init(document.getElementById('myChart'))
					// 绘制图表
				myChart.setOption({
					title: {
						text: '本周'
					},
					tooltip: {},
					xAxis: {
						data: ["公共\n客运", "道路\n客运", "公共\n客运","出租\n公交", "道路\n货运", "道路\n客运", "出租\n公交"]
					},
					yAxis: {},
					series: [{
						name: '销量',
						type: 'bar',
						itemStyle:{
							normal:{
								color:'lightblue'
							}
						},
						data: [5, 20, 36, 10, 14, 20,17],
						label: {
	                        show: true,
	                        position: 'top',
	                        formatter: '{b}\n{c}'
                    	}
					}]
				});
			},
		myChartThree() {
			// 基于准备好的dom，初始化echarts实例
			let myChartThree = this.$echarts.init(document.getElementById('myChartThree'))
				// 绘制图表
			myChartThree.setOption({
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
				},
				calculable: true,
				xAxis: [{
					type: 'category',
					boundaryGap: false,
					data: ['一队', '二队', '三队', '四队', '五队', '六队']
				}],
				yAxis: [{
					
				}],
				series: [{
					name: '邮件营销',
					type: 'line',
					stack: '总量',
					data: [10, 13, 10, 13, 9, 7, 21]
				}, {
					name: '联盟广告',
					type: 'line',
					stack: '总量',
					data: [22, 18, 9, 23, 9, 33, 8]
				}, {
					name: '视频广告',
					type: 'line',
					stack: '总量',
					data: [15, 13, 20, 15, 19, 33, 11]
				}, {
					name: '直接访问',
					type: 'line',
					stack: '总量',
					data: [22, 32, 10, 13, 19, 13, 12]
				}, {
					name: '搜索引擎',
					type: 'line',
					stack: '总量',
					data: [12, 33, 10, 23, 19, 33, 12]
				}]
			});
		}
		}
	} 
</script>